<template>
    <div>
        <div class="head">
            <el-menu
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#424242"
            text-color="#cdd1c5"
            active-text-color="#ffd04b"
            :default-active="$route.path">
            <el-menu-item index="/" class="title-item">JJY_BLOG</el-menu-item>
            <el-menu-item index="/home" style="margin-left: 10px;">博客</el-menu-item>
            <el-menu-item index="/blogType">分类专栏</el-menu-item>
            <el-menu-item index="/blogTag">标签</el-menu-item>
            <el-menu-item index="/message">留言板</el-menu-item>
            <el-menu-item index="/blogLinks">友链</el-menu-item>
            <el-menu-item index="/blogSearch/" v-if="this.$router.currentRoute.path !='/blogSearch/'" class="input-item">
              <div  @click="goToSearch" class="input">
                  <el-input size="small"
                            placeholder="请输入内容"
                            clearable
                            class="head-input">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                  </el-input>
              </div>
            </el-menu-item>
          </el-menu>
        </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Head',
    data () {
     return {

     }
    },
    props:['aIndex'],
    mounted() {
      this.activeIndex = this.aIndex
    },
    methods:{
      blogsearch(keyword){
        // console.log(keyword)
        this.$router.push('/blogSearch/' + keyword)
      },
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
        // this.activeIndex = key
        if(key == '/'){
          this.$router.push('/')
        }else if(key == '/home'){
          this.$router.push('/home')
        }else if(key == '/blogType'){
          this.$router.push('/blogType')
        }else if(key == '/blogTag'){
          this.$router.push('/blogTag')
        }else if(key == '/message'){
          this.$router.push('/message')
        }else if(key == '/blogLinks'){
          this.$router.push('/blogLinks')
        }
      },
      goToSearch(){
        this.$router.push('/blogSearch/')
      }
    }
  }
  </script>
  
  <style scoped>

    @media screen and (max-width: 800px) {
      .title-item{
        margin-left:200px;
        font-size: 60px;
        font-family: STZhongsong;
        color: #409eff !important;
      }

      .input{
        width:100%;
        height:100% !important;
        display:flex;
        align-items: center;
        justify-content: center;
      }
    }

    .head{
      background-color: #424242;
      border: 1px solid #424242;
    }

    /* logo */
    .title-item{
      margin-left: 150px;
      font-size: 60px;
      font-family: STZhongsong;
      color: #409eff !important; 
    }
  </style>